<template>
  <div class="">
    <el-form
      ref="queryForm"
      :model="queryParams"
      label-width="130px"
      :inline="true"
    >
      <el-form-item label="文件名:" class="f_d" prop="fileName">
        <el-input
          v-model="queryParams.fileName"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="秘密登记:" class="f_d2" prop="secretLevel">
        <el-input
          v-model="queryParams.secretLevel"
          placeholder="请输入"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item class="f_d3">
        <el-button
          type="primary"
          class="btn"
          @click="handleQuery"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          class="btn"
          size="mini"
          icon="el-icon-refresh"
          @click="resetQuery('queryForm')"
          >重置</el-button
        >
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-button
            size="mini"
            type="primary"
            style="margin-left: 18px"
            icon="el-icon-plus"
            @click="handleAdd"
            >新增文件</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      :inline="true"
      style="width: 95%; margin-left: 20px; margin-top: 20px"
    >
      <el-table-column
        prop="fileName"
        label="文件名"
        align="center"
        width="250"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="fileDesc"
        label="文件描述"
        align="center"
        width="250"
      >
      </el-table-column>

      <el-table-column prop="fileClassifies" label="文件分类" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.fileClassifies == 1"> 学科类 </span>
          <span v-if="scope.row.fileClassifies == 2"> 政治类 </span>
        </template>
      </el-table-column>
      <el-table-column prop="applyStatus" label="审批状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.applyStatus == 0">
            <el-tag>草稿</el-tag>
          </span>
          <span v-if="scope.row.applyStatus == 1">
            <el-tag type="success">处理中</el-tag>
          </span>
          <span v-if="scope.row.applyStatus == 2">
            <el-tag type="danger">撤回</el-tag>
          </span>
          <span v-if="scope.row.applyStatus == 3">
            <el-tag type="info">退回</el-tag>
          </span>
          <span v-if="scope.row.applyStatus == 4">
            <el-tag type="warning">办结</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="secretLevel" label="秘密等级" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.secretLevel == 1"> 绝密 </span>
          <span v-if="scope.row.secretLevel == 2"> 机密 </span>
          <span v-if="scope.row.secretLevel == 3"> 秘密 </span>
          <span v-if="scope.row.secretLevel == 4"> 公开 </span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.modifyTime != null">
            {{ parseTime(scope.row.modifyTime) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="撤销" placement="top">
            <el-button
              v-if="scope.row.applyStatus == 1 ? true : false"
              @click="cancel(scope.row)"
              type="warning"
              icon="el-icon-refresh-left"
              circle
              size="small"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <el-button
              @click="chakan(scope.row)"
              icon="el-icon-search"
              circle
              size="small"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增 -->
    <el-dialog
      title="新增行政文件"
      :visible.sync="open"
      width="60%"
      @close="reset('form1')"
    >
      <el-form :model="form1" :rules="rules" ref="form1" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件名称:" prop="fileName">
              <el-input
                v-model="form1.fileName"
                style="width: 200px"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="秘密级别:" prop="secretLevel">
              <el-select
                v-model="form1.secretLevel"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in secretlevelOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="文件描述:" prop="fileDesc">
              <el-input
                v-model="form1.fileDesc"
                style="width: 200px"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间:" prop="modifyTime">
              <el-date-picker
                :editable="false"
                type="date"
                v-model="form1.modifyTime"
                placeholder="选择日期"
                style="width: 200px"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="文件分类:" prop="fileClassifies">
              <el-select
                v-model="form1.fileClassifies"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in fileclassifiesOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="文件上传:" prop="fileList">
              <el-upload
                v-model="form1.fileList"
                class="upload-demo"
                action="http://49.4.65.194:8088/test/uploadImage"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-change="handleChange"
                :on-exceed="handleExceed"
                :on-success="succMsg"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel1">取 消</el-button>
        <el-button type="primary" @click="submitForm('form1')">保存</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :visible.sync="dialogVisible" width="50%" title="流程审批">
      <el-form :model="documentapplyFormData" ref="queryForm1" :inline="true">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件名称:" prop="fileName">
              <el-input
                style="width: 200px"
                v-model="documentapplyFormData.fileName"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="秘密级别:" prop="secretLevel">
              <el-select
                style="width: 200px"
                v-model="documentapplyFormData.secretLevel"
                placeholder="请选择"
                :disabled="true"
              >
                <el-option
                  v-for="dict in secretlevelOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                  :disabled="true"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件描述:" prop="fileDesc">
              <el-input
                style="width: 200px"
                v-model="documentapplyFormData.fileDesc"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="修改时间:" prop="modifyTime">
              <el-date-picker
                :editable="false"
                type="date"
                v-model="documentapplyFormData.modifyTime"
                placeholder="选择日期"
                style="width: 200px"
                :disabled="true"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="文件分类:" prop="fileClassifies">
              <el-select
                v-model="documentapplyFormData.fileClassifies"
                placeholder="请选择"
                style="width: 200px"
                :disabled="true"
              >
                <el-option
                  v-for="dict in fileclassifiesOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="其他附件："
              label-width="100px"
              style="margin-left: -20px"
              prop="fileList"
            >
              <el-upload
                style="margin-top: -40px"
                class="upload-demo"
                action="http://49.4.65.194:8088/test/uploadImage"
                :file-list="fileList"
                :disabled="true"
                :on-preview="handlePreview1"
              >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--审批记录-->
      <el-collapse>
        <el-collapse-item title="流程审批记录" name="1">
          <el-timeline style="margin-top: 5px">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :color="activity.endTime ? '#0bbd87' : ''"
              :timestamp="parseTime(activity.startTime)"
            >
              <el-tag v-if="activity.endTime" type="success">已处理</el-tag>
              <el-tag v-else type="info">未处理</el-tag>
              {{ activity.taskName }} {{ activity.description }}
            </el-timeline-item>
          </el-timeline>
        </el-collapse-item>
      </el-collapse>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  findDocumentApplyPageList,
  createDocumentApply,
  cancelDocumentApply,
  getDocumentApplyDetail,
  historyWorkFlowList,
} from "@/api/workflow/DocumentApplyPageList.js";
export default {
  // name: "DocumentApplyPageList",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    var checkFile = (rule, value, callback) => {
      if (this.fileList.length == 0) {
        return callback(new Error("文件不能为空"));
      } else {
        callback();
      }
    };

    // 这里存放数据
    return {
      //审批记录
      activities: [],
      documentapplyFormData: {},
      fileList: [],
      fileclassifiesOptions: [],
      secretlevelOptions: [],
      // 表单参数
      form: {},
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 字典表格数据
      termTimeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,

      rules: {
        fileName: [
          { required: true, message: "请输入文件名称", trigger: "blur" },
        ],
        secretLevel: [
          { required: true, message: "请选择秘密级别", trigger: "change" },
        ],

        fileSize: [
          { required: true, message: "请输入文件大小", trigger: "blur" },
        ],
        fileClassifies: [
          { required: true, message: "请选择文件分类", trigger: "change" },
        ],
        fileList: [{ required: true, validator: checkFile, trigger: "change" }],
      },
      tableData: null,

      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      chexiao: {
        applyDesc: "",
        applyID: "",
        applyTitle: "",
        approvedBy: "",
        attachment: "",
        businessKey: "",
        currNode: "",
        flag: 0,
        lastNode: "",
        processInstanceId: "",
        taskId: "",
        variables: {},
      },
      form1: {
        applyNo: "",
        applyStatus: "1",
        createBy: "",
        createTime: "",
        fileClassifies: "",
        fileDesc: "",
        fileName: "",
        filePath: "",
        fileSize: "",
        id: 0,
        modifyBy: "",
        modifyTime: "",
        pageNum: 0,
        pageSize: 0,
        processId: "",
        secretLevel: "",
        title: "",
        fileList: [],
      },

      dialogVisible: false,

      name: [],
      url: [],
      fileList1: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //预览
    handlePreview1(val) {
      console.log(val, 585);
      if (val) {
        const image = new Image();
        image.src = process.env.VUE_APP_BASE_API + "/school/file/" + val.url;
        const imgWindow = window.open(val);
        imgWindow.document.write(image.outerHTML);
      }
    },
    //查询审批历史记录
    historyWorkFlowList(row) {
      const processInstanceId = row.processId;
      historyWorkFlowList({ processInstanceId: processInstanceId }).then(
        (resp) => {
          console.log(resp);
          this.activities = resp.data;
        }
      );
    },
    upload(file) {
      this.url = process.env.VUE_APP_BASE_API + "/school/file/" + file.data;
      console.log(file, 666);
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      // 防止用户打开了文件选择框之后不选择文件而出现效验失败
      if (this.fileList) {
        this.$refs.form1.clearValidate("fileList");
      }
    },
    // 阻止upload的自己上传，进行再操作

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    succMsg(response, file, fileList) {
      console.log(response, file, fileList);
      this.name = file.name;
      this.url = response.result;
      this.fileList = fileList;
      this.$refs.form1.clearValidate("fileListCheck");
    },

    cancel(row) {
      this.chexiao.processInstanceId = row.processId;
      this.loading = true;
      cancelDocumentApply(this.chexiao).then((response) => {
        if (response.code === 200) {
          this.msgSuccess("撤销成功");
          this.getList();
          this.loading = false;
        } else {
          this.msgError(response.message);
        }
      });
    },
    chakan(row) {
      this.dialogVisible = true;
      const processInstanceId = row.processId;

      getDocumentApplyDetail(processInstanceId).then((resp) => {
        this.documentapplyFormData = resp.data;
        // this.url = process.env.VUE_APP_BASE_API + "/school/file/" + resp.data.image;
        let filenameList = resp.data.fileName.split(",");
        let filePathList = resp.data.filePath.split(",");
        this.fileList = [];
        for (let i = 0; i < filenameList.length; i++) {
          let fileJson = { name: filenameList[i], url: filePathList[i] };
          this.fileList.push(fileJson);
        }
      });
      this.historyWorkFlowList(row);
    },

    /** 提交按钮 */
    submitForm() {
      //  this.$refs.form1.clearValidate("fileList");
      this.$refs["form1"].validate((valid) => {
        if (valid) {
          this.form1.fileName = this.name;
          this.form1.filePath = this.url;
          createDocumentApply(this.form1).then((response) => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            } else {
              this.msgError(response.message);
            }
          });
          // }
        }
      });
    },

    // 取消按钮
    cancel1() {
      this.fileList = [];
      this.open = false;
      this.reset();
    },

    reset() {
      this.form1 = {
        applyNo: "",
        applyStatus: "1",
        createBy: "",
        createTime: "",
        fileClassifies: "",
        fileDesc: "",
        fileName: "",
        filePath: "",
        fileSize: "",
        id: 0,
        modifyBy: "",
        modifyTime: "",
        pageNum: 0,
        pageSize: 0,
        processId: "",
        secretLevel: "",
        title: "",
      };
      this.fileList = [];
      this.resetForm("form1");
      // this.resetForm("fileList");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      // this.title = "添加学年学期";
    },
    aa(row) {
      this.reset();
      this.open = true;
      this.title = "修改学年学期";
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");

      this.handleQuery();
    },
    getList() {
      this.loading = true;
      findDocumentApplyPageList(this.queryParams).then((response) => {
        console.log(response, "134");
        this.tableData = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
      console.log(this.tableData, "134");
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
    this.getDicts("secret_level").then((response) => {
      this.secretlevelOptions = response.data;
    });
    this.getDicts("file_classifies").then((response) => {
      this.fileclassifiesOptions = response.data;
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.el-form {
  width: 100%;
}
.d11 {
  display: flex;
  width: 230px;
}
.f_d {
  margin-top: 20px;
  margin-left: -50px;
  // float: left;
  //   width: 280px;
}
.f_d2 {
  margin-top: 20px;
  margin-left: -50px;
}
.f_d3 {
  margin-top: 20px;
  margin-left: 25px;
}
</style>
